<!--
<template>
  <div class="inspManage">
    <div class="inspManage-header">
      <el-select style="width: 130px;margin-right: 20px" v-model="value" placeholder="请选择部门">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select style="width: 130px" v-model="value" placeholder="请选择人员">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span class="label">时间 : </span>
      <el-date-picker
        style="width: 360px"
        v-model="date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00', '23:59:59']"
        @change="timeChage"
      >
      </el-date-picker>
      <el-button @click="search" style="margin-left: 20px" type="primary"
      >查询</el-button
      >
      <el-button @click="output" style="margin-left: 20px" type="primary"
      >导出报表</el-button
      >
    </div>
    <div class="inspManage-table">
        <el-table :data="tableData" stripe :header-cell-style="{
          background: '#8595B9',
          color: '#fff',
          height: '44px',
        }" max-height="681px">
          <el-table-column prop="company" label="部门" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="person" label="人员" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="startTime" label="出勤开始时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="endTime" label="出勤截止时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="hour" label="总时长" show-overflow-tooltip></el-table-column>
          <el-table-column prop="distance" label="总距离(km)" show-overflow-tooltip></el-table-column>
          <el-table-column prop="speed" label="平均速度(km/h)" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="90">
            <template slot-scope="scope">
              <a href="#href" @click="clickRouter(scope.row.id)">查看轨迹</a>
            </template>
          </el-table-column>
        </el-table>
      &lt;!&ndash; 分页 &ndash;&gt;
      <div class="page">
        <el-pagination
          hide-on-single-page
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import base from "@/api/base";
  export default {
    props: {},
    data() {
      return {
        addForm: {
          bridgeId: "",
          filePath: "",
          name: "",
          fileId: ""
        },
        upload: base.UPLOADURL,
        down: base.DOWNLOADURL + "/api/file/file/",
        addRules: {
          bridgeId: [{ required: true, message: "请选择桥梁" }],
          name: [{ required: true, message: "请输入文件名称", trigger: "blur" }],
          filePath: [{ required: true, message: "请上传文件" }]
        },

        fileList: [],
        dialogVisible: false,
        dialogTitle: "新增",
        date: "",
        value: "",
        total: 0,
        page: 1,
        options: [
          {
            value: "1",
            label: "日报"
          },
          {
            value: "2",
            label: "月报"
          }
        ],

        tableData: [],
        bridgeList: []
      };
    },
    created() {},
    mounted() {
      this.getList(1);
      // 获取所有桥梁
      this.getBridgeList();
    },
    watch: {},
    methods: {
      handleSubmit() {
        console.log(this.addForm);
        this.$refs.addForm.validate(vali => {
          if (!vali) {
            return false;
          } else {
            // 上传
            this.$api.reportForm
              .save({
                ...this.addForm
              })
              .then(res => {
                console.log(res.data.data);
                if (res.data.code == 200) {
                  this.$vs.notify({
                    text: "上传成功",
                    color: "success",
                    icon: "success"
                  });
                  this.dialogVisible = false;
                  this.fileList = [];
                  this.getList(1);
                }
              });
          }
        });
      },
      cancelFormSubmit() {
        this.dialogVisible = false;
      },
      add() {
        this.dialogVisible = true;
        this.fileList = [];
        this.$refs.addForm.resetFields();
      },
      downLoad(item) {
        console.log(item);
        this.$api.reportForm
          .dowlond({
            id: item.id
          })
          .then(res => {
            console.log("地址", res.data.data);
            if (res.data.data.fileId) {
              let url = this.down + res.data.data.fileId;
              const a = document.createElement("a");
              a.setAttribute("download", "");
              a.setAttribute("href", url);
              a.click();
            } else {
              this.$vs.notify({
                text: "暂无文件",
                color: "warning",
                icon: "warning"
              });
            }
          });
      },

      // 获取列表
      getList(i) {
        this.page = i;
        this.$api.reportForm
          .getList({
            bridgeId: localStorage.getItem("ownId"),
            page: i,
            pageSize: 10,
            startTime: this.date[0],
            endTime: this.date[1],
            reportType: Number(this.value)
          })
          .then(res => {
            console.log("res", res.data.data);
            this.total = Number(res.data.recordsTotal);
            this.tableData = res.data.data;
          });
      },
      // 触发分页
      changePage(i) {
        this.getList(i);
      },

      timeChage(i, s) {
        console.log(i, s);
      },
      search() {
        this.getList(1);
      },
      output() {
        this.value = "";
        this.date = "";
        this.getList(1);
      },

      // 获取所有桥梁
      getBridgeList() {
        this.$api.mearsuringPointSetting.getBridgeAll().then(res => {
          console.log("所有桥梁", res.data.data[0]);
          this.bridgeList = res.data.data[0];
        });
      },

      // 文件超出限制
      handleExceed() {
        this.$vs.notify({
          text: "最多只能上传一个文件",
          color: "warning",
          icon: "warning"
        });
      },
      // 移除文件
      handleRemove(file, fileList) {
        this.fileList = [];
        (this.addForm.fileId = ""), (this.addForm.filePath = "");
      },
      // 上传成功的
      handSuccess(file, fileList) {
        console.log("上传成功", fileList.response.data.successFiles[0]);
        this.addForm.filePath = fileList.response.data.successFiles[0].filePath;
        this.addForm.fileId = fileList.response.data.successFiles[0].id;
        this.$refs.addForm.clearValidate("filePath");
      }
    }
  };
</script>
<style scoped lang="scss">
  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table th {
    font-weight: 500;
    color: #fff;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #444;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table&#45;&#45;striped .el-table__body tr.el-table__row&#45;&#45;striped td {
    background: #f1f5fc;
  }

  .inspManage {
    width: 100%;
    height: calc(100vh - 150px);
    background: #fff;
    .inspManage-header {
      padding: 10px;
      .label {
        margin-left: 20px;
        margin-right: 5px;
      }
    }
  }
  .inspManage-table {
    padding: 10px;
  }
  .add {
    float: right;
  }
  .page {
    text-align: center;
    margin-top: 15px;
  }
</style>
-->
<template>
  <div class="inspManage">
    <div class="inspManage-header">
      <el-select style="width: 130px;margin-right: 20px" v-model="value" placeholder="请选择部门">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select style="width: 130px" v-model="value" placeholder="请选择人员">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span class="label">时间 : </span>
      <el-date-picker
        style="width: 360px"
        v-model="date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00', '23:59:59']"
        @change="timeChange"
      >
      </el-date-picker>
      <el-button @click="search" style="margin-left: 20px" type="primary"
      >查询</el-button
      >
      <el-button @click="output" style="margin-left: 20px" type="primary"
      >导出报表</el-button
      >
    </div>
    <div class="inspManage-table">
      <el-table :data="tableData" stripe :header-cell-style="{
          background: '#8595B9',
          color: '#fff',
          height: '44px',
        }" max-height="681px">
        <el-table-column prop="company" label="部门" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="person" label="人员" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="startTime" label="出勤开始时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="hour" label="总时长" show-overflow-tooltip></el-table-column>
        <el-table-column prop="distance" label="总距离(km)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="speed" label="平均速度(km/h)" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
            <a href="#href" @click="clickRouter(scope.row.id)">查看轨迹</a>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          hide-on-single-page
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
    <div >
      <input type="button" value="开始" onClick="this._CarTrack.start();"/>
      <input type="button" value="暂停" onClick="this._CarTrack.pause();"/>
      <input type="button" value="结束" onClick="this._CarTrack.stop();"/>
    </div>
    <div id="container" class="map_box"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          company: '四科新纪元1组',
          person: '王浩',
          startTime: '2021-03-24',
          hour: '6小时45分钟',
          distance: '27',
          speed: '4',
        },{
          company: '四科新纪元1组',
          person: '严斌',
          startTime: '2021-03-25',
          hour: '6小时35分钟',
          distance: '26',
          speed: '4',
        },{
          company: '四科新纪元1组',
          person: '陆建军',
          startTime: '2021-03-28',
          hour: '6小时50分钟',
          distance: '37',
          speed: '5',
        },{
          company: '四科新纪元2组',
          person: '顾娟',
          startTime: '2021-04-02',
          hour: '6小时03分钟',
          distance: '23',
          speed: '4',
        },{
          company: '四科新纪元2组',
          person: '黄张宇',
          startTime: '2021-04-04',
          hour: '7小时01分钟',
          distance: '33',
          speed: '5',
        },{
          company: '四科新纪元3组',
          person: '单俊君',
          startTime: '2021-04-06',
          hour: '6小时35分钟',
          distance: '30',
          speed: '5',
        },{
          company: '四科新纪元1组',
          person: '王浩',
          startTime: '2021-04-14',
          hour: '6小时45分钟',
          distance: '27',
          speed: '5',
        },{
          company: '四科新纪元2组',
          person: '黄张宇',
          startTime: '2021-04-18',
          hour: '7小时01分钟',
          distance: '34',
          speed: '5',
        },{
          company: '四科新纪元1组',
          person: '王浩',
          startTime: '2021-04-24',
          hour: '6小时45分钟',
          distance: '27',
          speed: '5',
        }],
        date: "",
        value: "",
        total: 0,
        page: 1,
        options: [
          {
            value: "1",
            label: "日报"
          },
          {
            value: "2",
            label: "月报"
          }
        ],
      };
    },
    created() {


    },
    mounted() {
      this.getInspManage()
    },
    watch: {},
    methods: {
      //天地图初始化
      /*initMap(lng, lat) {

/!*        //设置显示地图的中心点和级别
        this.map.centerAndZoom(new T.LngLat(lng, lat), 12.5);
        //允许鼠标双击放大地图
        this.map.enableScrollWheelZoom();
        // checkResize()
        window.addEventListener("resize", () => {
          this.map.checkResize();
        });

        //创建地图图层对象
        let mapTypeSelect = [
          {
            title: "地图", //地图控件上所要显示的图层名称
            icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
            layer: window.TMAP_NORMAL_MAP //地图类型对象，即MapType。
          },
          {
            title: "卫星",
            icon:
              " http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png",
            layer: window.TMAP_SATELLITE_MAP
          },
          {
            title: "卫星混合",
            http: "api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
            layer: window.TMAP_HYBRID_MAP
          },
          {
            title: "地形",
            icon:
              " http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png",
            layer: window.TMAP_TERRAIN_MAP
          },
          {
            title: "地形混合",
            icon:
              " http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png",
            layer: window.TMAP_TERRAIN_HYBRID_MAP
          }
        ];
        var ctrl = new T.Control.MapType({ mapTypes: mapTypeSelect }); // 初始化地图类型选择控件

        // this.map.addControl(ctrl); //添加地图选择控件

        this.map.setMapType(window.TMAP_NORMAL_MAP); // 设置地图*!/
      },*/

      getInspManage(){
        // 初始化地图
        /*this.initMap(120.826, 32.02);*/
        var tile = new T.TileLayer("http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=62ea4c72da74f4ae7d76f36d45bc9a20");
        var map = new T.Map("container", {layers: [tile]});
        /*map.centerAndZoom(new T.LngLat(120.826, 32.02), 13);*/
        map.centerAndZoom(new T.LngLat(116.318090, 39.920270), 13);
        var _CarTrack = new T.CarTrack(map, {
          interval: 5,
          speed: 10,
          dynamicLine: true,
          polylinestyle: {color: "#2C64A7", weight: 5, opacity: 0.9},
          Datas: datas.features.map(function (obj, i) {
              var coordinates = obj.geometry.coordinates;
              var lnlat = new T.LngLat(coordinates[0], coordinates[1]);
              return lnlat;
            }
          )
        })
      },
      // 触发分页
      changePage(i) {
        this.getList(i);
      },

      timeChange(i, s) {
        console.log(i, s);
      },
    }
  };
</script>
<style scoped lang="scss">
  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table th {
    font-weight: 500;
    color: #fff;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #444;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #f1f5fc;
  }

  .inspManage {
    width: 100%;
    height: calc(100vh - 150px);
    background: #fff;
    .inspManage-header {
      padding: 10px;
      .label {
        margin-left: 20px;
        margin-right: 5px;
      }
    };
    .inspManage-table {
      padding: 10px;
      .page {
        text-align: center;
        margin-top: 15px;
      }
    };
    position: relative;
    .map_box {
      width: 100%;
      height: 50vh;
      background: papayawhip;
      // margin-top: 20px;
    };
  }


</style>
